<template>
  <div class="action-bar">
    <div class="btn-list">
      <div v-if="hasFasong" class="btn-item">
        <!-- TODO:原来的代码 -->
        <!-- <el-button
          v-if="fasongActive && judgePermission(pageNo, 'add')"
          type="text"
          class="showFasong"
          @click="fasong"
        >
          <svg-icon class-name="international-icon" icon-class="fasong-tijiao" />
          {{ fasongText }}
        </el-button>
        <el-button v-else type="text" class="hide" disabled>
          <svg-icon class-name="international-icon" icon-class="fasong-tijiao" />
          {{ fasongText }}
        </el-button> -->
        <!-- TODO: 就修改了这里-->
        <img
          v-if="fasongActive"
          :src="
            activeList.examine
              ? require(`../../assets/action-bar-icon/${fasongText}-hover.png`)
              : require(`../../assets/action-bar-icon/${fasongText}-active.png`)
          "
          @mouseenter="btnEnter('examine')"
          @mouseleave="btnLeave('examine')"
          @click="fasong"
        />
      </div>
      <div v-if="hasQr" class="btn-item">
        <img
          v-if="qrActive"
          :src="
            activeList.qrcode
              ? require(`../../assets/action-bar-icon/qr-code-hover.png`)
              : require(`../../assets/action-bar-icon/qr-code-active.png`)
          "
          @mouseenter="btnEnter('qrcode')"
          @mouseleave="btnLeave('qrcode')"
          @click="qrShow"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/qr-code.png"
        />
      </div>
      <div
        v-if="hasExamineAuth && judgePermission(pageNo, 'assignAppFunction')"
        class="btn-item"
      >
        <img
          v-if="funcExamineAuthActive"
          :src="
            activeList.examine
              ? require(`../../assets/action-bar-icon/examine-hover.png`)
              : require(`../../assets/action-bar-icon/examine.png`)
          "
          @mouseenter="btnEnter('examine')"
          @mouseleave="btnLeave('examine')"
          @click="funcExamineAuthShow"
        />
      </div>
      <div
        v-if="hasAppAuth && judgePermission(pageNo, 'assignAppFunction')"
        class="btn-item"
      >
        <img
          v-if="funcAppAuthActive"
          src="~@/assets/action-bar-icon/App-active.png"
          @click="funcAppAuthShow"
        />
        <img v-else class="not-allowed" src="~@/assets/action-bar-icon/App.png" />
      </div>
      <div
        v-if="hasFuncAuth && judgePermission(pageNo, 'assignPermissions')"
        class="btn-item"
      >
        <img
          v-if="funcAuthActive"
          src="~@/assets/action-bar-icon/func-auth-active.png"
          @click="funcAuthShow"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/func-auth.png"
        />
      </div>
      <div
        v-if="hasDataAuth && judgePermission(pageNo, 'assignPermissions')"
        class="btn-item"
      >
        <img
          v-if="dataAuthActive"
          src="~@/assets/action-bar-icon/data2.png"
          :src="
            activeList.data2
              ? require(`../../assets/action-bar-icon/data2-hover.png`)
              : require(`../../assets/action-bar-icon/data2.png`)
          "
          @mouseenter="btnEnter('data2')"
          @mouseleave="btnLeave('data2')"
          @click="dataAuthShow"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/data1.png"
        />
      </div>
      <div
        v-if="hasAssignRole && judgePermission(pageNo, 'assignRoles')"
        class="btn-item"
      >
        <img
          v-if="assignRole"
          src="~@/assets/action-bar-icon/assign-role-active.png"
          @click="assignRoleShow"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/assign-roles-no.png"
        />
      </div>
      <div v-if="hasAdd && judgePermission(pageNo, 'add')" class="btn-item">
        <img
          v-if="addActive"
          :src="
            activeList.add
              ? require(`../../assets/action-bar-icon/add-hover.png`)
              : require(`../../assets/action-bar-icon/add-active.png`)
          "
          @mouseenter="btnEnter('add')"
          @mouseleave="btnLeave('add')"
          @click="add"
        />
        <img v-else class="not-allowed" src="~@/assets/action-bar-icon/add.png" />
      </div>
      <div v-if="hasEdit && judgePermission(pageNo, 'edit')" class="btn-item">
        <img
          v-if="editActive"
          :src="
            activeList.edit
              ? require(`../../assets/action-bar-icon/edit-hover.png`)
              : require(`../../assets/action-bar-icon/edit-active.png`)
          "
          @mouseenter="btnEnter('edit')"
          @mouseleave="btnLeave('edit')"
          @click="edit"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/edit.png"
        />
      </div>
      <div v-if="hasDel && judgePermission(pageNo, 'delete')" class="btn-item">
        <img
          v-if="delActive"
          src="~@/assets/action-bar-icon/del-active.png"
          @click="del"
        />
        <img v-else class="not-allowed" src="~@/assets/action-bar-icon/del.png" />
      </div>
      <div v-if="hasSave && judgePermission(pageNo, 'save')" class="btn-item">
        <img
          v-if="saveActive"
          :src="
            activeList.save
              ? require(`../../assets/action-bar-icon/save-hover.png`)
              : require(`../../assets/action-bar-icon/save-active.png`)
          "
          @mouseenter="btnEnter('save')"
          @mouseleave="btnLeave('save')"
          @click="save"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/save.png"
        />
      </div>
      <div v-if="hasSaves" class="btn-item">
        <img
          v-if="saveActive"
          src="~@/assets/action-bar-icon/save-active.png"
          @click="save"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/save.png"
        />
      </div>
      <div v-if="hasCancel" class="btn-item">
        <img
          v-if="cancelActive"
          src="~@/assets/action-bar-icon/cancel-active.png"
          @click="cancel"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/cancel.png"
        />
      </div>
      <div v-if="hasRenewa" class="btn-item">
        <img
          v-if="renewaActive"
          :src="
            activeList.ContractRenewa
              ? require(`../../assets/action-bar-icon/ContractRenewa-hover.png`)
              : require(`../../assets/action-bar-icon/ContractRenewa-active.png`)
          "
          @mouseenter="btnEnter('ContractRenewa')"
          @mouseleave="btnLeave('ContractRenewa')"
          @click="renewa"
        />
        <img
          v-else
          class="not-allowed"
          src="~@/assets/action-bar-icon/ContractRenewa.png"
        />
      </div>
      <div v-if="hasSuspension" class="btn-item">
        <img
          v-if="suspensionActive"
          src="~@/assets/action-bar-icon/suspensionOfContract-active.png"
          @click="suspension"
        />
        <img v-else src="~@/assets/action-bar-icon/suspensionOfContract.png" />
      </div>
      <div v-if="hasTermination" class="btn-item">
        <img
          v-if="terminationActive"
          src="~@/assets/action-bar-icon/terminationOfContract-active.png"
          @click="termination"
        />
        <img v-else src="~@/assets/action-bar-icon/terminationOfContract.png" />
      </div>
      <div v-if="hasRecovery" class="btn-item">
        <img
          v-if="recoveryActive"
          src="~@/assets/action-bar-icon/contractRecovery-active.png"
          @click="recovery"
        />
        <img v-else src="~@/assets/action-bar-icon/contractRecovery.png" />
      </div>
      <div v-if="hasImport" class="btn-item" @click="importData">
        <!-- 导入 -->
        <img
          v-if="hasImport"
          :src="
            activeList.leading
              ? require(`../../assets/action-bar-icon/leading-hover.png`)
              : require(`../../assets/action-bar-icon/leading-active.png`)
          "
          @mouseenter="btnEnter('leading')"
          @mouseleave="btnLeave('leading')"
        />
      </div>
      <div v-if="hasSort" class="btn-item" @click="sortData">
        <!-- 排序 -->
        <img
          v-if="hasSort"
          :src="
            activeList.sort
              ? require(`../../assets/action-bar-icon/sort-hover.png`)
              : require(`../../assets/action-bar-icon/sort-active.png`)
          "
          @mouseenter="btnEnter('sort')"
          @mouseleave="btnLeave('sort')"
        />
      </div>
      <div v-if="hasDispose" class="btn-item">
        <!-- 批量修改 -->
        <el-button
          v-if="!disposeFlag"
          :disabled="disposeFlag"
          class="showFasong"
          @click="dispose"
        >批量处理</el-button>
        <el-button
        v-else
          :disabled="disposeFlag"
          class="hide"
          @click="dispose"
        >批量处理</el-button>
      </div>
      <div v-if="hasExport" class="btn-item">
        <!-- <el-button class="showFasong download" @click="download">
          <i class="el-icon-finished"></i>
          导出
        </el-button> -->
        <img
          :src="
            activeList.export
              ? require(`../../assets/action-bar-icon/export-hover.png`)
              : require(`../../assets/action-bar-icon/export.png`)
          "
          @mouseenter="btnEnter('export')"
          @mouseleave="btnLeave('export')"
          @click="download"
        />
      </div>
      <div v-if="hasEditColumn" class="btn-item">
        <!-- <el-button class="showFasong" @click="showColumn">列配置</el-button> -->
        <img
          :src="
            activeList.showColumn
              ? require(`../../assets/action-bar-icon/column-hover.png`)
              : require(`../../assets/action-bar-icon/column.png`)
          "
          @mouseenter="btnEnter('showColumn')"
          @mouseleave="btnLeave('showColumn')"
          @click="showColumn"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "",
  components: {},
  props: {
    fasongText: {
      type: String,
      default: "提交"
    },
    // 导出
    hasExport: {
      type: Boolean,
      default: false
    },
    // 列配置
    hasEditColumn: {
      type: Boolean,
      default: false
    },
    // 处理
    hasDispose: {
      type: Boolean,
      default: false
    },
    disposeFlag: {
      type: Boolean,
      default: true
    },
    // 提交终止
    hasFasong: {
      type: Boolean,
      default: false
    },
    fasongActive: {
      type: Boolean,
      default: true
    },
    // 合同终止
    hasTermination: {
      type: Boolean,
      default: false
    },
    terminationActive: {
      type: Boolean,
      default: false
    },
    // 合同中止
    hasSuspension: {
      type: Boolean,
      default: false
    },
    suspensionActive: {
      type: Boolean,
      default: false
    },
    // 合同中止
    hasRecovery: {
      type: Boolean,
      default: false
    },
    recoveryActive: {
      type: Boolean,
      default: false
    },
    // 合同续约
    hasRenewa: {
      type: Boolean,
      default: false
    },
    renewaActive: {
      type: Boolean,
      default: false
    },
    // 二维码
    hasQr: {
      type: Boolean,
      default: false
    },
    qrActive: {
      type: Boolean,
      default: false
    },
    // 功能权限
    hasFuncAuth: {
      type: Boolean,
      default: false
    },
    funcAuthActive: {
      type: Boolean,
      default: false
    },
    // App功能权限
    hasAppAuth: {
      type: Boolean,
      default: false
    },
    funcAppAuthActive: {
      type: Boolean,
      default: false
    },
    // App功能权限
    hasExamineAuth: {
      type: Boolean,
      default: false
    },
    funcExamineAuthActive: {
      type: Boolean,
      default: true
    },
    // 数据权限
    hasDataAuth: {
      type: Boolean,
      default: false
    },
    dataAuthActive: {
      type: Boolean,
      default: false
    },
    // 角色分配
    hasAssignRole: {
      type: Boolean,
      default: false
    },
    assignRole: {
      type: Boolean,
      default: false
    },
    // 添加
    hasAdd: {
      type: Boolean,
      default: true
    },
    addActive: {
      type: Boolean,
      default: true
    },
    // 修改
    hasEdit: {
      type: Boolean,
      default: true
    },
    editActive: {
      type: Boolean,
      default: false
    },
    // 删除
    hasDel: {
      type: Boolean,
      default: true
    },
    delActive: {
      type: Boolean,
      default: false
    },
    // 保存
    hasSave: {
      type: Boolean,
      default: true
    },
    // 保存特殊
    hasSaves: {
      type: Boolean,
      default: false
    },
    saveActive: {
      type: Boolean,
      default: false
    },
    // 取消
    hasCancel: {
      type: Boolean,
      default: true
    },
    cancelActive: {
      type: Boolean,
      default: false
    },
    // 导入
    hasImport: {
      type: Boolean,
      default: false
    },
    // 排序
    hasSort: {
      type: Boolean,
      default: false
    },
    pageNo: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      activeList: {}
    };
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission"
    })
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    btnEnter(btn) {
      this.$set(this.activeList, btn, true)
    },
    btnLeave(btn) {
      this.$set(this.activeList, btn, false)
    },
    showColumn() {
      this.$emit("showColumn");
    },
    download() {
      this.$emit("download");
    },
    dispose() {
      this.$emit("dispose");
    },
    add() {
      this.$emit("add");
      setTimeout(() => { this.$set(this.activeList, 'add', false) }, 100)
    },
    edit() {
      this.$emit("edit");
    },
    del() {
      this.$emit("del");
    },
    save() {
      this.$emit("save");
    },
    qrShow() {
      this.$emit("qrShow");
    },
    // 功能权限
    funcAuthShow() {
      this.$emit("funcAuth");
    },
    // App功能权限
    funcAppAuthShow() {
      this.$emit("funcAppAuth");
    },
    // 数据权限
    dataAuthShow() {
      this.$emit("dataAuth");
    },
    // 分配角色
    assignRoleShow() {
      this.$emit("assignRole");
    },
    cancel() {
      this.$emit("cancel");
    },
    renewa() {
      this.$emit("renewa");
    },
    suspension() {
      this.$emit("suspension");
    },
    termination() {
      this.$emit("termination");
    },
    recovery() {
      this.$emit("recovery");
    },
    importData() {
      this.$emit("import");
    },
    sortData() {
      this.$emit("sortData");
    },
    funcExamineAuthShow() {
      this.$emit("examine");
    },
    fasong() {
      this.$emit("fasong");
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";
.action-bar {
  width: 100%;
  height: $actionBarHeight;
  background-color: $hamburgerBgColor;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 10px;
  box-sizing: border-box;
  padding: 10px;
  .btn-list {
    display: flex;
    align-items: center;
    z-index: 9;
    .btn-item {
      margin-right: 15px;
      display: flex;
      img {
        height: 30px;
        cursor: pointer;
      }

      ::v-deep {
        .showFasong {
          // width: 68px;
          box-sizing: border-box;
          height: 30px;
          background: #518300;
          border-radius: 5px 5px 5px 5px;
          opacity: 1;
          border: 1px solid #93d626;
          box-shadow: 0 0 0.1px 0.3px #75b4c750;
          padding: 1px 2px;
          color: #ffffff;
          font-size: 15px;
          &.download {
            background: #02bcec;
            border: 1px solid #02bcec;
            > span {
              display: inline-block;
              background: #02bcec;
            }
          }
          > span {
            display: inline-block;
            // width: 62px;
            height: 24px;
            // box-sizing: border-box;
            // line-height: 10px;
            background: #93d626;
            box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.26);
            border-radius: 4px 4px 4px 4px;
            opacity: 1;
            padding: 4.5px 4px;
            // display: flex;
          }
        }
        .hide {
          // width: 68px;
          box-sizing: border-box;
          height: 30px;
          background: #003a4c;
          border-radius: 5px 5px 5px 5px;
          opacity: 1;
          border: 1px solid #004a61;
          box-shadow: 0 0 0.1px 0.3px #75b4c750;
          padding: 1px 2px;
          color: #75b4c7;
          font-size: 15px;
          > span {
            display: inline-block;
            // width: 62px;
            height: 24px;
            background: #004a61;
            box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.26);
            border-radius: 4px 4px 4px 4px;
            opacity: 1;
            padding: 4.5px 4px;
            // display: flex;
          }
        }
      }
      &:last-child {
        margin-right: 0px;
      }
      .not-allowed {
        cursor: not-allowed;
      }
    }
  }
}
</style>
